<!--
  @desc: 固定头部组件带搜索框和不带搜索框
  @author: lanbao
-->
<template>
  <div>
      <div class="header" v-if="switchHeader">
          <div class="return"><img src="../assets/imgs/icon_return.png" alt=""></div>
          <div class="title">{{title}}</div>
      </div>
      <div class="header_search" v-if="!switchHeader">
          <div class="search">
            <img class="icon_search" src="../assets/imgs/icon_search.png">
            <input class="search_value" ref="input" type="text"
              :placeholder='defaultValue'
              v-model='inputValue'
               >
            <span class="clean_value" @click="emptyValue">×</span>
          </div>
          <div class="cancel">取消</div>
      </div>
      <div class="margin_bottom"></div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    switchHeader: Boolean
  },
  data () {
    return {
      'defaultValue': '请搜索',
      'inputValue': ''
    }
  },
  methods: {
    emptyValue: function () {
      this.inputValue = ''
    }
  }
} </script>
<style lang="stylus" scope>
@import '~@/common/css/variable.styl';
  .header
    max-width 100%
    width 100%
    height 88px
    background $brown_color
    position fixed
    top 0
    left 0
    z-index 22
    .title
      height 22px
      font-size 20px
      font-family PingFangSC-Medium,PingFang SC
      font-weight 500
      color #F2E0B3
      text-align center
      line-height 22px
      margin 0 auto
      padding-top 55px
    .return
        width 24px
        height 24px
        padding-top 54px
        float left
        text-align center
        line-height 24px
        img
          width 100%
          height 100%
  .header_search
    position fixed
    top 0
    width 100%
    height 50px
    background #F4F4F4
    display flex
    justify-content space-between
    padding-top 38px
    .search
      width 306px
      height 40px
      border-radius 40px
      background #fff
      margin-left 15px
      display flex
      justify-content space-between
      .icon_search
        width 17px
        height 17px
        margin-left 10px
        margin-top 10px
      .search_value
        margin-top 10px
        width 225px
        height 21px
        font-size 15px
        font-weight 400
        color #eee
        line-height 21px
        border none
        outline none
        color #433036
      .clean_value
        margin-top 13px
        width 15px
        height 15px
        background #eeeeee
        color #fff
        line-height 14px
        text-align center
        margin-right 10px
        display block
        border-radius  50%
    .cancel
      color #EE7736
      font-size 15px
      height 18px
      padding 10px
      text-align center
      line-height 18px
  .margin_bottom
    height 88px
</style>
